<template>
	<div class="main_container">
		<!-- 弹出信息框 -->
		<el-dialog :title="type ? '创建配方' : '修改配方'" :visible.sync="active" width="50%">
			<el-form ref="form" :model="selRecipe" label-width="80px">
				<el-form-item label="配方名称">
					<el-input v-model="selRecipe.name"></el-input>
				</el-form-item>
				<el-form-item label="运行时间">
					<el-input-number v-model="selRecipe.time" :precision="2" class="w-full"></el-input-number>
				</el-form-item>
				<el-form-item label="版本">
					<el-select v-model="selRecipe.version" class="w-full" disabled>
						<el-option v-for="(version, index) of versionList" :key="index" :value="version.id"
							:label="version.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="原材料">
					<item-list-panel :initialProducts="selRecipe.ingredients" :initialItems="ingredientList"
						@update="handleModalIngredientUpdate" />
				</el-form-item>
				<el-form-item label="产物">
					<item-list-panel :initialProducts="selRecipe.products" :initialItems="productList"
						@update="handleModalProductUpdate" />
				</el-form-item>
				<el-form-item label="生产建筑">
					<build-select :builds="selRecipe.buildings" :AllBuilds="buildList"
						@update="handleModalBuildUpdate" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="active = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- END弹出信息框 -->

		<!-- 搜索框部分 -->
		<div id="search">
			<el-form :inline="true" :model="recipeQo" id="search_form">
				<el-form-item label="配方名">
					<el-input v-model="recipeQo.name" clearable></el-input>
				</el-form-item>
				<el-form-item label="原材料">
					<item-filter-picker :id="recipeQo.ingredient" :items="ingredientList"
						@change="(newVal) => recipeQo.ingredient = newVal" clearable />
				</el-form-item>
				<el-form-item label="产物">
					<item-filter-picker :id="recipeQo.product" :items="productList"
						@change="(newVal) => recipeQo.product = newVal" clearable />
				</el-form-item>
				<el-form-item label="建筑">
					<el-select v-model="recipeQo.building" class="b_select" multiple collapse-tags>
						<el-option v-for="(b, index) of buildList" :key="index" :value="b.id" :label="b.name"
							class="flex">
							<my-image :icon="b.iconUrl" :size="32" type="buildings" :lazy="index >= 10"></my-image>
							<p>{{ b.name }}</p>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleCreate()">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- END搜索框部分 -->
		<pagination-table search-url="/recipe/list" :searchData="recipeQo" id="table" :operate-width="240" ref="table"
			has-index>
			<el-table-column prop="name" label="配方名" width="180"></el-table-column>
			<el-table-column prop="time" label="合成时间" width="80"></el-table-column>
			<el-table-column prop="ingredients" label="原料" width="200">
				<template slot-scope="scope">
					<div class="left-display">
						<item-rate-show v-for="(i, index) of scope.row.ingredients" :key="index" :item='i'
							:time="scope.row.time" class="item" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="products" label="产物" width="200">
				<template slot-scope="scope">
					<div class="left-display">
						<item-rate-show v-for="(p, index) of scope.row.products" :key="index" :item='p'
							:time="scope.row.time" class="item" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="buildings" label="生产建筑" width="120">
				<template slot-scope="scope">
					<div class="build_container1">
						<el-image v-for="(b, index) of scope.row.buildings" :key="index" :src="Build(b.iconUrl)"
							style="width: 40px; height: 40px" />
					</div>
				</template>
			</el-table-column>
			<template v-slot:operate="scope">
				<el-button type="primary" size="small" @click="handleUpdate(scope.row)">修改</el-button>
				<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
			</template>
		</pagination-table>
	</div>
</template>

<script>
	import BuildSelect from "../components/BuildSelect.vue";
	import ItemListPanel from '@/components/ItemPicker/ItemListPanel.vue';
	import PaginationTable from '@/components/PaginationTable.vue';
	import SimpleBuildShow from "../components/SimpleBuildShow";
	import ItemRateShow from "@/components/ItemRateShow";
	import ItemFilterPicker from '@/components/ItemPicker/ItemFilterPicker.vue';
	import MyImage from "@/components/Image.vue";
	export default {
		components: {
			ItemRateShow,
			SimpleBuildShow,
			BuildSelect,
			ItemFilterPicker,
			ItemListPanel,
			PaginationTable,
			MyImage,
		},
		name: "RecipePage",
		data() {
			return {
				recipeQo: {
					name: null,
					ingredient: null,
					product: null,
					building: [],
				},
				ingredientList: [],
				productList: [],
				buildList: [],
				versionList: [],
				selRecipe: {
					time: 1,
					products: [],
					buildings: [],
					ingredients: [],
					version: this.$version.getVersion(),
				},
				active: false, //是否显示
				type: true, // 是否是创造模式
				isShow: false, // 控制子组件是否显示
			};
		},
		methods: {
			init() {
				this.$api.get('/recipe/init').then((res) => {
					this.ingredientList = res.data.ingredients.map((i)=>{
						return{
							...i,
							isShow: true
						};
					});
					this.productList = res.data.products.map((p)=>{
						return{
							...p,
							isShow: true
						};
					});
					this.buildList = res.data.buildings;
					this.versionList = res.data.versions;
				});
			},
			Item(url) {
				return this.$img.i_64(url);
			},
			Build(url) {
				return this.$img.b_64(url);
			},
			handleSearch() {
				// console.log("refs:", this.$refs);
				this.$refs.table.handleSearch();
			},
			handleCreate() {
				this.selRecipe = {
					version: this.$version.getVersion(),
					ingredients: [],
					products: [],
					buildings: [],
					time: 1,
				};
				this.type = true;
				this.active = true;
			},
			handleUpdate(recipe) {
				this.selRecipe = JSON.parse(JSON.stringify(recipe));
				this.selRecipe.ingredients = this.selRecipe.ingredients.map((i) => {
					return {
						id: i.id,
						number: i.amount
					};
				})
				this.selRecipe.products = this.selRecipe.products.map((i) => {
					return {
						id: i.id,
						number: i.amount
					};
				})
				// console.log("更新：", this.selRecipe);
				this.type = false;
				this.active = true;
			},
			handleDelete(recipe) {
				console.log("删除", recipe.id);
				this.$confirm("此操作将永久删除该配方, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						this.$api.post("recipe/remove/" + recipe.id).then((res) => {
							this.init();
							this.handleSearch();
							this.$message({
								type: "success",
								message: "删除成功!",
							});
						});
					})
					.catch(() => {
						this.$message({
							type: "warning",
							message: "已取消删除",
						});
					});
			},
			handleSubmit() {
				var _this = this;
				this.$confirm("确认保存配方吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						console.log("提交:", this.selRecipe);
						// console.log("type:", this.type)
						var url = "/recipe/" + (this.type ? "create" : "modify");
						this.$api.postJson(url, this.selRecipe).then((res) => {
							this.$message({
								type: "success",
								message: "保存成功!",
							});
							this.active = false;
							this.handleSearch();
						});
					})
					.catch(() => {
						this.$message({
							type: "warning",
							message: "已取消提交",
						});
					});
			},
			handleModalIngredientUpdate(Ingredients) {
				this.selRecipe.ingredients = Ingredients;
			},
			handleModalProductUpdate(Products) {
				this.selRecipe.products = Products;
			},
			handleModalBuildUpdate(Builds) {
				this.selRecipe.buildings = Builds;
			},
		},
		mounted() {
			this.init();
			var search = this.$refs.table.handleSearch;
			this.$version.addListener("recipe", function(version) {
				search();
			});
		},
		destroyed() {
			this.$version.removeListener("recipe");
		},
	};
</script>

<style lang="less" scoped>
	.main_container {
		width: 100vw;
		height: calc(100vh - 60px);

		#search {
			background-color: white;
			padding: 10px;
			border-radius: 8px;
			height: 60px;
			box-sizing: border-box;
			width: 100%;
			text-align: right;
			// 保证搜索框向右对齐

			#search_form {
				/deep/ .el-form-item {
					margin-bottom: 0;
				}
			}
		}

		#table {
			width: 90%;
			margin: auto;
			margin-top: 15px;
			height: calc(100vh - 180px);
		}

	}

	.cell {
		text-align: center;
	}

	.left-display {
		.item {
			margin: 4px;
		}
	}

	.flex {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.flex-around {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}

	.build_container1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.6);
		border: 1px solid black;
		border-radius: 2px;
	}

	.small_img {
		width: 32px;
		height: 32px;
	}
</style>